<template>
  <div class="shopping">
    <topNav :enter="enter" :isTitle="false"></topNav>
    <div class="shopping_home">
      <div class="shopping_item">
        <div class="item_top">
          <div class="top_left">购物车（全部11）</div>
          <div class="top_right">
            <div>已选商品（不含运费） <span>0.00</span> </div>
            <el-button size="medium" type="primary" round :disabled="disabled">结算</el-button>
          </div>
        </div>
        <el-divider></el-divider>

        <shoppingItem></shoppingItem>
      </div>
    </div>
  </div>
</template>

<script>
import { getAddShopping } from '../config/api'

import topNav from '../components/Top-nav'
import shoppingItem from '../components/Shopping-item'

export default {
  data() {
    return {
      token: this.$token(),
      userId: window.localStorage.getItem('userId'),
      shoppingArr: [],
      // 是否禁用
      disabled: true
    }
  },
  components: { topNav, shoppingItem },
  methods: {
    // 子组件的回车事件
    enter(value) {
      console.log(value)
    }
  },
  mounted() {
    getAddShopping(this.token, this.userId)
      .then(result => {
        if (result.status == 200) {
          if (result.data.code == 200) {
            console.log(result.data.data)
            this.shoppingArr = result.data.data
          }
        }
      })
      .catch(err => {
        console.log(err)
      })
  }
}
</script>

<style lang="less" scoped>
.shopping {
  background-color: rgb(151, 150, 150);
  height: 100vh;
  .shopping_home {
    width: 100%;
    padding: 0px calc((100vw - 1200px) / 2);

    .shopping_item {
      width: 100%;
      background-color: #fffffffa;
      border-top-right-radius: 15px;
      border-top-left-radius: 15px;
      margin-top: 15px;
      .item_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .top_left {
          color: #000;
          font-weight: bold;
          margin: 10px;
        }
        .top_right {
          display: flex;
          align-items: center;
          margin: 10px;
          div:nth-child(1) {
            span {
              color: red;
              font-weight: bold;
              font-size: 20px;
            }
            margin-right: 10px;
          }
          .el-button--primary.is-disabled,
          .el-button--primary.is-disabled:active,
          .el-button--primary.is-disabled:focus,
          .el-button--primary.is-disabled:hover {
            color: #fff;
            background-color: rgba(255, 0, 0, 0.553);
            border-color: rgba(255, 0, 0, 0.553);
          }
          .el-button--primary:focus,
          .el-button--primary:hover {
            background: rgba(255, 85, 85, 0.906);
            border-color: rgba(255, 0, 0, 0.884);
            color: #fff;
          }
          .el-button--primary {
            background: red;
            border-color: red;
            color: #fff;
          }
        }
      }
      .el-divider el-divider--horizontal {
        margin: 6px 0;
      }
    }
  }
}
</style>